<template>
	<view class="pages">
		<cu-custom :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>
		</cu-custom>
		<scroll-view scroll-y="true" :style="[{height:scrollH+'px'}]">
			<!--详情模块-->
			<view class="item-box1 ">
				<!-- 	<view class="item-card "> -->
				<view class="item-card-head item-card-view ">
					<image :src="item.servers.icon" class="icon-sm" mode="" @error="errorimg(index)"></image>
					<text class="item-card-head-name">{{item.server_name || ""}}</text>

				</view>
				<view class="item-card-bodty  item-card-view ">
			

					<view class="bodty-right" v-if="item.address">
						<view class="bodty-title ">
							<view class="text-blue dian"> • </view> <text>{{item.address || ""}}</text>
						</view>
						<view class="bodty-desc">

							<TextOver :content="item.desc" :num="200" :isFixed="false" style="height: 100%;" :type="1">
							</TextOver>

						</view>

						<view class="bodty-bottom">
							<image v-for="(dat,index) in item.desc_img" :src="dat" mode="aspectFill"
								class="img-box-desc" @click="previewImgs(index,item.desc_img)"></image>
					
						</view>

					</view>

				</view>


				<!-- 
				</view> -->

			</view>

			<!-- 工人模块 -->
			<view class="worker-box  " v-if="item.man  ">
				<view class="worker-head ">
					<view class="cu-avatar round lg " :style="[{backgroundImage:'url('+item.man.headimgurl+')'}]">

					</view>
					<view class="worker-head-center ">
						<view class="work-name"><text class="work-name1">{{item.man.realname || ""}}</text>
							<view class="woker-tag">维修工</view>
						</view>
						<text class="work-info">{{item.man.mobile || ""}}</text>

					</view>
					<view class="cu-avatar round xs middleBj" @click="callMobile(item.man.mobile)">
						<text class="cuIcon-dianhua"></text>
					</view>


				</view>

				<view class="work-img-item" v-if="item.order_status==2">

					<view class="work-img-item1">
						<image class="logo" mode="aspectFill" :src="item.arrive_img" @error="errorGood('arrive_img')"
							@click="previewImg(0,item.arrive_img)"></image>
						<view class="work-desc">到场照片</view>
					</view>
					<view class="work-img-item1">
						<image class="logo" mode="aspectFill" :src="item.before_img" @error="errorGood('before_img')"
							@click="previewImg(0,item.before_img)"></image>
						<view class="work-desc">修理前照片</view>
					</view>
					<view class="work-img-item1">
						<image class="logo" mode="aspectFill" :src="item.over_img" @error="errorGood('over_img')"
							@click="previewImg(0,item.over_img)"></image>
						<view class="work-desc">修理后照片</view>
					</view>


				</view>


			</view>

			<!-- 订单模块 -->

			<view class="info-list">
				<view class="info-list-item ">
					<text class="list-item-left">下单时间</text>
					<view class="list-item-right">
						<text class="liet-time">{{item.created_at || ""}}</text>
					</view>
				</view>
				<view class="line-item">

				</view>
				<view class="info-list-item ">
					<text class="list-item-left">派工时间</text>
					<view class="list-item-right">
						<text class="text-blue" v-if="item.order_status==0">订单未派工</text>
						<text class="liet-time" v-else>{{item.take_time || ''}}</text>
					</view>
				</view>
				<view class="line-item">

				</view>
				<view class="info-list-item " v-if="item.order_status==2">
					<text class="list-item-left">完成时间</text>
					<view class="list-item-right">
						<text class="liet-time">{{item.over_time || ''}}</text>
					</view>
				</view>
				<view class="line-item" v-if="item.order_status==2">

				</view>
				<view class="info-list-item ">
					<text class="list-item-left">提交人信息</text>
					<view class="list-item-right">
						<view class="liet-time">{{item.consignee || ""}} {{item.mobile || ""}}</view>
						<view class="liet-time">{{item.address || ""}}</view>
					</view>
				</view>
				<view class="line-item">

				</view>
				<view class="info-list-item ">
					<text class="list-item-left">工单号</text>
					<view class="list-item-right">
						<text class="liet-time">{{item.order_sn || ""}}</text>
					</view>
				</view>
				<view class="info-list-item " v-if="item.order_status==3">
					<text class="list-item-left">取消原因</text>
					<view class="list-item-right">
						<view class="liet-time">
						{{item.cancel_desc || "暂无"}}
							</view>
					</view>
				</view>


			</view>

			<view class="foot">

			</view>
		</scroll-view>
	</view>

</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	import TextOver from '@/components/text-over.vue'
	export default {
		components: {
			MescrollUni,
			TextOver
		},
		name: "User",
		data() {
			return {
				title: "工单",
				StatusBar: this.Custom,
				swiperHeight: 0,
				item: {}, //列表数据
				order_id: -1,
				sendIndex: -1,
				scrollH: this.WH - this.CustomBar - 5,
			}
		},
		onLoad(option) {
			(option) ? (() => {
				this.order_id = option.order_id;
				this.getOrder();
			})() : "";
		},
		mounted() {
			this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height);
		},
		methods: {
			callMobile(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				})
			},
			previewImgs(src, urls) {
				uni.previewImage({
					current: src,
					urls
				})
			},
			previewImg(src, urls) {
				let arr = [];
				arr.push(urls);
				urls = arr;
				uni.previewImage({
					current: src,
					urls
				})
			},

			errorimg(name) {
				this.item[name] = this.resDomain + "/static/img/error.png";
			},
			/**
			 * 选择派单时间
			 */
			selectSendTime(e) {
				this.sendIndex = e.detail.value
			},
			getOrder() {
				this.apiRequest("/buyer/ServerOrderInfo", {
					order_id: this.order_id
				}, 0, 'GET').then((res) => {
					if (res.code == 200) {
						this.item = res.data;
					}
				})
			}

		}




	}
</script>

<style scoped>
	.pages {
		overflow: hidden;
	}

	.item-box1 {
		width: 92%;
		display: flex;
		margin: auto;
		flex-direction: column;
		min-height: 114upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		margin: 0upx auto;
		padding-bottom: 20upx;
		padding-top: 20upx;
	}

	.item-card {
		width: 100%;
		min-height: 114upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		margin: 0upx auto;
		display: flex;
		flex-direction: column;
		padding-bottom: 20upx;
		padding-top: 20upx;
	}

	.item-card-view {
		width: 94%;
		margin: auto;
	}

	.item-card-head {
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.item-card-foot {
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		justify-content: space-between;
	}

	.icon-sm {
		width: 60upx;
		height: 60upx;
	}

	.item-card-head-name {
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 20upx;
	}

	.order-status {
		width: 20%;
		height: 100%;
		font-size: 24upx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;
		position: absolute;
		float: right;
		right: 0;
		justify-content: flex-end;
	}

	.item-card-bodty {
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.bodty-left {
		width: 5%;
	}

	.bodty-right {
		/* margin-left: 2%; */
		width: 96%;
	}

	.bodty-title {
		font-size: 40upx;
		font-weight: 800;
		color: #333333;
		display: flex;
		text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		height: 50upx;
		line-height: 50upx;
		-webkit-box-orient: vertical;
	}

	.bodty-title text {
		height: 50upx;
		line-height: 50upx;
	}

	.bodty-desc {
		width: 100%;
		padding-top: 15upx;
		padding-bottom: 15upx;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		padding-left: 25upx;
	}

	.bodty-bottom {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-left: 25upx;
	}

	.img-box-desc {
		width: 23%;
		height: 110upx;
		margin-right: 2%;
		border-radius: 20upx;
		margin-bottom: 10upx;
		background-position: center;
		background-size: cover;
		margin-top: 15upx;

	}

	.sumbit-box {
		height: 140upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.button-box {
		width: 60%;
		height: 60%;
		background: #1270E0;
		border-radius: 10px;
		font-size: 36upx;
		font-weight: 500;
		color: white;
		margin-right: 5%;
	}

	.cancelButton {
		margin-left: 5%;
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
	}

	/**
	 * 工人信息
	 */
	.worker-box {
		width: 92%;
		margin: auto;
		min-height: 150upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20upx;
	}

	.worker-head {
		width: 94%;
		height: 100%;
		margin-top: 10upx;
		min-height: 100upx;
		padding-top: 15upx;
		padding-bottom: 15upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

	}

	.work-img {
		width: 96%;
		height: 240upx;
		padding: 15upx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;

	}

	.work-img-item {
		width: 94%;
		margin: auto;
		margin-bottom: 15upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.work-img-item1 {
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.worker-head-center {
		height: 100%;
		width: 70%;
		display: flex;
		flex-direction: column;
		padding-left: 15upx;
	}

	.work-name {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.work-info {
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		padding-top: 10upx;
	}

	.woker-tag {
		font-size: 22upx;
		font-weight: 500;
		color: #333333;
		border: 1px solid #DBDBDB;
		border-radius: 10px;
		display: flex;
		align-items: center;
		padding-left: 10upx;
		padding-right: 10upx;
		height: min-content;
	}

	.work-name1 {
		max-width: 60%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-right: 15upx;
		font-size: 36upx;
		font-weight: 800;
		color: #333333;
	}

	.middleBj {
		background: #F7F7F7;

	}

	.cuIcon-dianhua {

		color: #999999;
	}

	.goods-list {
		white-space: nowrap;
		width: 100%;
		height: 260rpx;
	}

	.work-desc {
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		width: 100%;
		text-align: center;
	}


	.logo {
		width: 160rpx;
		height: 160rpx;
		margin: auto;
		border-radius: 10rpx;
	}

	/**
	 * info信息
	 */
	.info-list {
		width: 92%;
		min-height: 114upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		margin: 20upx auto;
		display: flex;
		flex-direction: column;
		padding-bottom: 20upx;
		padding-top: 20upx;
		justify-content: center;
		align-items: center;
	}

	.info-list-item {
		width: 94%;
		min-height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		justify-content: space-between;


	}

	.list-item-left {
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
	}

	.list-item-right {
		position: relative;
/* 		float: right;
		right: 0; */
		max-width: 50%;
	}

	.liet-time {
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
		text-align: right;
		word-break: break-all;
		word-wrap: break-word;
	}

	.line-item {
		height: 3upx;
		width: 100%;
		background-color: #F1F1F1;
	}

	.dian {
		width: 25upx;
		display: flex;
		align-items: center;
		font-size: 45upx;
	}
</style>
